<template>
  <div>
    <div class="hd-nav" v-if="tempArray">
      <!-- 导航 -->
      <i @click="goback" class="iconfont icon-xiangzuo1 icon-1"></i>
      <p>选择城市</p>
    </div>
    <!-- vant -->
    <div class="content">
      <p class="con-now">
        当前城市:<span>{{ beforArray }}</span>
      </p>
      <van-index-bar :index-list="indexList">
        <div class="hotcity">
          <p>最近访问城市</p>
          <ul class="hotcity-list">
            <li v-for="(e, i) in history" @click="beforAddres(e)" :key="Math.random()*i">
              {{ e }}
            </li>
          </ul>
        </div>
        <div class="hotcity">
          <p>热门城市</p>
          <ul class="hotcity-list">
            <li v-for="(e, i) in hotAddres" @click="beforAddres(e)" :key="Math.random()*i">
              {{ e }}
            </li>
          </ul>
        </div>
        <!--  -->
        <van-index-anchor  class="anchor-item" index="A" />
        <van-cell
          :title="`${e.nm}`"
          @click="select"
          v-for="(e, i) in tempArraya"
          :key="Math.random()*i"
        />
        <van-index-anchor class="anchor-item" index="B" />
        <van-cell
          :title="`${e.nm}`"
          @click="select"
          v-for="(e, i) in tempArrayb"
          :key="Math.random()*i"
        />
        <van-index-anchor class="anchor-item" index="C" />
        <van-cell
          :title="`${e.nm}`"
          @click="select"
          v-for="(e, i) in tempArrayc"
          :key="Math.random()*i"
        />
        <van-index-anchor class="anchor-item" index="D" />
        <van-cell
          :title="`${e.nm}`"
          @click="select"
          v-for="(e, i) in tempArrayd"
          :key="Math.random()*i"
        />
        <van-index-anchor class="anchor-item" index="E" />
        <van-cell
          :title="`${e.nm}`"
          @click="select"
          v-for="(e, i) in tempArraye"
          :key="Math.random()*i"
        />
        <van-index-anchor class="anchor-item" index="F" />
        <van-cell
          :title="`${e.nm}`"
          @click="select"
          v-for="(e, i) in tempArrayf"
          :key="Math.random()*i"
        />
        <van-index-anchor class="anchor-item" index="G" />
        <van-cell
          :title="`${e.nm}`"
          @click="select"
          v-for="(e, i) in tempArrayg"
          :key="Math.random()*i"
        />
        <van-index-anchor class="anchor-item" index="H" />
        <van-cell
          :title="`${e.nm}`"
          @click="select"
          v-for="(e, i) in tempArrayh"
          :key="Math.random()*i"
        />
        <van-index-anchor class="anchor-item" index="J" />
        <van-cell
          :title="`${e.nm}`"
          @click="select"
          v-for="(e, i) in tempArrayj"
          :key="Math.random()*i"
        />
        <van-index-anchor class="anchor-item" index="K" />
        <van-cell
          :title="`${e.nm}`"
          @click="select"
          v-for="(e, i) in tempArrayk"
          :key="Math.random()*i"
        />
        <van-index-anchor class="anchor-item" index="L" />
        <van-cell
          :title="`${e.nm}`"
          @click="select"
          v-for="(e, i) in tempArrayl"
          :key="Math.random()*i"
        />
        <van-index-anchor class="anchor-item" index="M" />
        <van-cell
          :title="`${e.nm}`"
          @click="select"
          v-for="(e, i) in tempArraym"
          :key="Math.random()*i"
        />
        <van-index-anchor class="anchor-item" index="N" />
        <van-cell
          :title="`${e.nm}`"
          @click="select"
          v-for="(e, i) in tempArrayn"
          :key="Math.random()*i"
        />
        <van-index-anchor class="anchor-item" index="P" />
        <van-cell
          :title="`${e.nm}`"
          @click="select"
          v-for="(e, i) in tempArrayp"
          :key="Math.random()*i"
        />
        <van-index-anchor class="anchor-item" index="Q" />
        <van-cell
          :title="`${e.nm}`"
          @click="select"
          v-for="(e, i) in tempArrayq"
          :key="Math.random()*i"
        />
        <van-index-anchor class="anchor-item" index="R" />
        <van-cell
          :title="`${e.nm}`"
          @click="select"
          v-for="(e, i) in tempArrayr"
          :key="Math.random()*i"
        />
        <van-index-anchor class="anchor-item" index="S" />
        <van-cell
          :title="`${e.nm}`"
          @click="select"
          v-for="(e, i) in tempArrays"
          :key="Math.random()*i"
        />
        <van-index-anchor class="anchor-item" index="T" />
        <van-cell
          :title="`${e.nm}`"
          @click="select"
          v-for="(e, i) in tempArrayt"
          :key="Math.random()*i"
        />
        <van-index-anchor class="anchor-item" index="W" />
        <van-cell
          :title="`${e.nm}`"
          @click="select"
          v-for="(e, i) in tempArrayw"
          :key="Math.random()*i"
        />
        <van-index-anchor class="anchor-item" index="X" />
        <van-cell
          :title="`${e.nm}`"
          @click="select"
          v-for="(e, i) in tempArrayx"
          :key="Math.random()*i"
        />
        <van-index-anchor class="anchor-item" index="Z" />
        <van-cell
          :title="`${e.nm}`"
          @click="select"
          v-for="(e, i) in tempArrayz"
          :key="Math.random()*i"
        />
      </van-index-bar>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import { IndexBar, IndexAnchor, cell } from "vant";
export default {
  name: "addres",
  data() {
    return {
      beforArray: "",
      hotAddres: [], //热门
      history: ["广州"], //访问记录
      initialAddres: [], //渲染地址列表
      tempArray: [],
      tempAddres: [],
      tempShiArr: [],
      tempArraya: [],
      tempArrayb: [],
      tempArrayc: [],
      tempArrayd: [],
      tempArraye: [],
      tempArrayf: [],
      tempArrayg: [],
      tempArrayh: [],
      tempArrayj: [],
      tempArrayk: [],
      tempArrayl: [],
      tempArraym: [],
      tempArrayn: [],
      tempArrayp: [],
      tempArrayq: [],
      tempArrayr: [],
      tempArrays: [],
      tempArrayt: [],
      tempArrayw: [],
      tempArrayx: [],
      tempArrayy: [],
      tempArrayz: [],
      indexList: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "J",
        "K",
        "L",
        "M",
        "N",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "W",
        "X",
        "Y",
        "Z",
      ],
    };
  },
  components: {
    [IndexAnchor.name]: IndexAnchor,
    [IndexBar.name]: IndexBar,
    [cell.name]: cell,
  },
  methods: {
      ...mapMutations(["changeNowCityArray","changeCityArray"]),
    goback() {
      this.$router.go(-1);
    },
    getDatatest() {
      let pro = axios.get("https://apis.netstart.cn/driver/city-area.json");
      pro
        .then((res) => {
          this.hotAddres = res.hot;
          this.initialAddres = res.initial;
          // console.log("请求成功111----->", res.hot);
          console.log("请求成功111----->", res.initial);
          for (let i = 0; i < res.initial.length; i++) {
            // console.log(res.initial[i][1]);
            // console.log('----------------');
            for (let j = 0; j < res.initial[i][1].length; j++) {
              // console.log(res.initial[i][1][j]);
              this.tempArray.push(res.initial[i][1][j]);
            }
          }
          for (let k = 0; k < this.tempArray.length; k++) {
            // console.log(this.tempArray[k].citys);
            for (let h = 0; h < this.tempArray[k].citys.length; h++) {
              if (this.tempArray[k].citys[h].counties != undefined) {
                // console.log(this.tempArray[k].citys[h].counties);
                this.tempAddres.push(this.tempArray[k].citys[h].counties);
              }
            }
          }
          console.log("所有区的信息---", this.tempAddres);
        })
        .catch((err) => {
          console.log("请求失败----->", err);
        });
    },
    getData() {
      let pro = axios.get("citys.json");
      pro
        .then((res) => {
          this.hotAddres = res.hot;
          this.initialAddres = res.cts;
          //  console.log('城市列表---',this.initialAddres);
          for (let key in res.cts) {
            //  if(key)
            // console.log(res.cts[key].py.slice(0, 1));
            switch (res.cts[key].py.slice(0, 1)) {
              case "a":
                this.tempArraya.push(res.cts[key]);
                break;
              case "b":
                this.tempArrayb.push(res.cts[key]);
                break;
              case "c":
                this.tempArrayc.push(res.cts[key]);
                break;
              case "d":
                this.tempArrayd.push(res.cts[key]);
                break;
              case "e":
                this.tempArraye.push(res.cts[key]);
                break;
              case "f":
                this.tempArrayf.push(res.cts[key]);
                break;
              case "g":
                this.tempArrayg.push(res.cts[key]);
                break;
              case "h":
                this.tempArrayh.push(res.cts[key]);
                break;
              case "j":
                this.tempArrayj.push(res.cts[key]);
                break;
              case "k":
                this.tempArrayk.push(res.cts[key]);
                break;
              case "l":
                this.tempArrayl.push(res.cts[key]);
                break;
              case "m":
                this.tempArraym.push(res.cts[key]);
                break;
              case "n":
                this.tempArrayn.push(res.cts[key]);
                break;
              case "p":
                this.tempArrayp.push(res.cts[key]);
                break;
              case "q":
                this.tempArrayq.push(res.cts[key]);
                break;
              case "r":
                this.tempArrayr.push(res.cts[key]);
                break;
              case "s":
                this.tempArrays.push(res.cts[key]);
                break;
              case "t":
                this.tempArrayt.push(res.cts[key]);
                break;
              case "w":
                this.tempArrayw.push(res.cts[key]);
                break;
              case "x":
                this.tempArrayx.push(res.cts[key]);
                break;
              case "y":
                this.tempArrayy.push(res.cts[key]);
                break;
              case "z":
                this.tempArrayz.push(res.cts[key]);
                break;
              default:
                console.log("找不到---");
                break;
            }
          }
          console.log("a", this.tempArraya);
          console.log("b", this.tempArrayb);
        })
        .catch((err) => {
          console.log("请求失败----->", err);
        });
    },
    beforAddres(k) {
       //当前
      this.beforArray = k;
      // 访问过的城市
      this.history.push(k);
         // 去重
      this.history = Array.from(new Set(this.history));
      // console.log("当前地址---->", k);
      //  this.$router.replace({path:'/'});
      //  this.$router.push({path:'/'});
       this.$router.go(-1)
    },
    select(e) {
      //当前
      this.beforArray = e.target.innerText;
      // 访问
      this.history.push(e.target.innerText);
      // 去重
      this.history = Array.from(new Set(this.history));
      // 访问过的城市
      // console.log(e.target.innerText);

      //  this.$router.push({path:'/'})
       this.$router.go(-1)
    },
  },
  watch:{
    beforArray(value){
      // console.log('数值变化---当前城市---',value);
      this.changeNowCityArray(value)
    },
    history(value){
      // console.log('数值变化---访问过的城市----',value);
      this.changeCityArray(value)
    }
  },
  created() {
    this.getData();
  },
  mounted(){
    // 取值
    this.beforArray = this.$store.state.beforArray || []
    this.history = this.$store.state.cityArray || []
  }
};
</script>

<style lang="scss" scoped>
// 头
.hd-nav {
  width: 100%;
  height: 44px;
  background: rgb(255, 255, 255);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  .icon-1 {
    font-size: 30px;
    margin-left: 10px;
    color: #ccc;
  }
  .icon-2 {
    font-size: 30px;
    margin-right: 10px;
    color: #ccc;
    font-weight: bold;
  }
  p {
    width: 60%;
    height: 100%;
    line-height: 44px;
    font-size: 20px;
  }
}
// content
.content {
  width: 100%;
  margin-top: 44px;
  .con-now {
    width: 352px;
    margin: 0 auto;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    border-bottom: 1px solid rgb(236, 236, 236);
    span {
      padding-left: 10px;
      font-weight: bold;
    }
  }
}
.hotcity {
  width: 352px;
  margin: 7px auto;
  font-size: 0;
  // display: flex;
  p {
    font-size: 16px;
  }
  .hotcity-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    border-bottom: 1px solid rgb(236, 236, 236);
    li {
      font-size: 14px;
      padding: 8px 16px;
      margin: 10px 0;
      margin-right: 25px;
      border: 1px solid rgb(230, 230, 230);
      box-sizing: border-box;
      border-radius: 7px;
    }
    li:nth-child(4n) {
      margin-right: 0;
    }
  }
}
.anchor-item{
  background: rgb(240, 240, 240);
}
</style>